ES 6 又稱作 ES 2015 ,是 ECMAScript(JavaScript 的規範) 的新版本,
有許多好用的新語法來解決舊版本 ECMAScript 的一些奇怪的問題與帶來了許多便利,
各家瀏覽器依據 ES 6 的規範實做新功能到自家產品上,因此已經可以放心的使用在專案上,
今後大概會每天講一點自己對 ES 6 所知道的部分。
使用 var 宣告變數會將變數加到全域物件 window 下,
在多人開發時,變數可能會互相影響導致其他問題,
var a = 1;
console.log(a);
for(var i = 0; i<3; i++) { // i 會被加到全域物件 window 下
console.log(i);
}
這時候如果再查看全域物件 window 下 i 的值,會發現 i 的值為 3,
console.log(i) // 3
let 變數範圍只(存活)作用在{}內,可解決影響全域變數的問題,
let 不能重複宣告變數,但可以重新賦值(使用=指定運算子),
// let 作用域 = { }內
//if (3 > 2) {
// let a = 1; // a 變數不會新增到 window 下
//}
var a = 0;
function changeA() {
let a = 1;
a = 0;
console.log(a);
}
changeA();
console.log(a);
在 for 迴圈中使用 var 會將變數與全域物件連結,導致在事件的運用上也會出現與自己預期不一樣的事件結果。
在 for 圈使用 let 宣告變數可以讓變數在 {} 內的程式碼執行時重新與變數邦定,使得結果如自己的預期。
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const listLen = document.querySelectorAll('.list li').length;
for(let i = 0; listLen > i; i++){ //如果用 var 宣告 i 變數在迴圈執行時在全域物件 window 的全域變數 i 會導致與預期不同。
document.querySelectorAll('.list li')[i].addEventListener('click',function() {
alert(i+1);
});
}
</script>
</body>
用 const 宣告變數 會讓變數變成不能重新被指派,物件與陣列除外,
因為不是原始型別,所以會依據參考指向整個物件(by reference),
物件裡的屬性是可以修改的,但不能將此物件重新指派成另一個新的物件,
可使用 Object.freeze 方法將物件凍結讓物件不能被修改,但只有第一層屬性有效果。
// let 與 const 用來宣告區塊裡的變數,
// 區塊 = { }
// const 常數 - 不能修改
// 變數不能被變更 - url 網址
// {} [] 物件與陣列可以修改
// const a = 1;
// a = 2;
// console.log(a); // 出錯 用 const 宣告的變數不能重新指派
const obj = {
url: 'http://dfoa.com'
};
// obj.url = 'x'; // 物件內的屬性可以修改
Object.freeze(obj); // 如果不想讓屬性被修改 可以將物件凍結 讓裡面的屬性與值不能被修改
console.log(obj.url);
let 與 const 在同個區塊上不能重複命名,它們也不會與全域物件 window 連結變成全域變數互相影響,
// let、const
// 不可犯的錯誤,特性介紹
console.log(a); // 這會出錯
let a = 3;
console.log(a); // 3
// 第二點 同個區塊上不能重複命名
let a = 1;
let a = 2;
// 第三點 不會與全域物件 window 連結 變成全域變數互相影響,
let a = 1;
var b = 2;
"ES6 又稱作 ES2015 ,是 JavaScript 的更新版本"
想了一下覺得好像說 JavaScript 的標準 (ECMAScript 5) 更新版本似乎更適合
因為 js 不像 vue.js 有 vue 1, vue 2, 他就是照著 ECMAScript 標準走
只是小建議~~
謝謝你的分享